<script setup>
import {ref,onMounted} from 'vue'
import { useRoute,useRouter } from 'vue-router';
import axios from '@/http/index'
import dayjs from 'dayjs'
let route=useRoute()
let id=ref(route.query.id)
let houseid= ref(localStorage.getItem('houseid'))
let order=ref([])
onMounted(()=>{
    axios.get(`/my/orderxq?id=${id.value}`).then(
        res=>{
            if(res.data.code==200){
                order.value=res.data.data
                console.log(res.data.data)
            }
        }
    )
})
</script>
<template>
     <div>
        <van-sticky>
            <van-nav-bar title="订单详情" left-arrow @click-left="onClickLeft" />
        </van-sticky>
        <div style="height:200px;width:100%;background-color:rgb(127,142,163);color:#fff;">
            <div style="display:flex;padding-top:60px;padding-left:90px;">
                <img style="width:50px;height:50px;" src="/cancel.png">
                <div style="margin-left:20px;">
                    <p style="font-size:20px;margin-top:-4px;">已取消</p>
                    <p style="font-size:20px;margin-top:3px;">您的订单已取消</p>
                </div>
            </div>
            <div style="background-color:#fff;width:85%;margin:auto;margin-top:35px;color:#000;padding-top:30px;" v-for="item in order" :key="item._id">
                <h3 style="font-weight:bolder;border-bottom:2px solid #ddd;padding-bottom:10px;padding-left:20px;">
                    订单总额 
                    <span style="color:red;font-weight:bolder;margin-left:10px;"> ￥{{item.price}}.0</span>
                    <span style="color:gray;margin-left:50px;">费用明细&nbsp;&gt;</span>
                </h3>
                <p style="margin-top:50px;text-align:center;">
                    <van-button plain hairline type="primary" @click="$router.push(`/home/xq?id=${houseid}`)">&nbsp;&nbsp;再次预订&nbsp;&nbsp;</van-button>
                </p>
                <div style="margin-top:50px;display:flex;border-bottom:2px solid #ddd;padding-bottom:10px;">
                    <div style="padding-left:20px;">
                        <h3 style="font-weight:bolder;">预计到店时间</h3>
                        <p style="margin-top:5px;color:gray;">酒店将尽量为您保留房间</p>
                    </div>
                    <div style="margin-left:34px;margin-top:10px;color:gray;">
                        <p>{{dayjs(item.entertime).format('MM月DD日')}}&nbsp;&nbsp;14:00</p>
                    </div>
                </div>
                <div style="margin-top:20px;border-bottom:2px solid #ddd;padding-bottom:20px;">
                    <p style="margin-left:20px;position:relative;">
                        <span>入住人</span>
                        <span style="position:absolute;right:20px;">{{item.entername}}</span>
                    </p>
                    <p style="margin-left:20px;position:relative;margin-top:20px;">
                        <span>联系手机</span>
                        <span style="position:absolute;right:20px;">{{item.phone}}</span>
                    </p>
                    <p style="margin-left:20px;position:relative;margin-top:20px;">
                        <span>房间信息</span>
                        <span style="position:absolute;right:20px;">标准大床房 &nbsp;{{item.roomNum}}间</span>
                    </p>
                    <p style="margin-left:20px;position:relative;margin-top:20px;">
                        <span>入住日期</span>
                        <span style="position:absolute;right:20px;">{{dayjs(item.entertime).format('MM月DD日')}}-{{dayjs(item.leavetime).format('MM月DD日')}}&nbsp;&nbsp;({{ item.days }}晚)</span>
                    </p>
                </div>
                <div style="margin-top:20px;">
                    <p style="margin-left:20px;position:relative;">
                       <span>下单时间</span> 
                       <span style="position:absolute;right:20px;">{{dayjs(item.ordertime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                    </p>
                    <p style="margin-left:20px;position:relative;margin-top:20px;">
                        <span>订单编号</span> 
                        <span style="position:absolute;right:20px;">G{{ item._id.slice(15) }}</span>
                     </p>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>

 </style>
